<template>
	<!-- 美食详情 -->
	<view>
		<swiper class="screen-swiper" :class="'square-dot'" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="5000" duration="500">
			<swiper-item v-for="(item,index) in food.main_images" :key="index">
				<image :src="url+item" mode="aspectFill"></image>
				<!-- <video src="/static/zwss.png" v-else></video> -->
			</swiper-item>
		</swiper>
		<view class="head bg-white">
			<view style="display: flex;">
				<view class="title">{{food.name}}</view>
				<view v-if="food.coupon_gift_number != 0"
					style="font-size: 22rpx;white-space: nowrap;height: 36rpx; background-color: #1CD699; color: #fff; padding: 5rpx 10rpx; border-radius: 10rpx;">
					立返{{food.coupon_gift_number}}张抵用券</view>
			</view>
			<view class="money flex-cb">
				<view class="left">
					<text class="">原价：</text>
					<text class="icon">￥</text>
					<text class="num">{{food.sku.spec_list[0].item_list[0].price}}</text>
				</view>
				<view class="right flex align-end">
					<image src="/static/vip.png" class="icon_div" mode=""></image>
					<text class="jifen">会员价：</text>
					<text class="icon">￥</text>
					<text class="num"
						style="margin-right: 25rpx;">{{food.sku.spec_list[0].item_list[0].vip_price}}</text>
				</view>
			</view>
			<view class="money money2  flex-cb">
				<view class="left" style="margin-top: 20rpx;">
					<text style="color: #000;">库存 {{food.sku.spec_list[0].item_list[0].stock||0}}</text>
				</view>
				<view class="right flex align-end"
					v-if="food.sku.spec_list[0].item_list[0]['100_point_deduct_amount'] != 0">
					<image src="/static/jf.png" class="icon_div" mode=""></image>
					<text class="jifen">积分最多抵扣：</text>
					<text class="icon">￥</text>
					<text class="num">{{food.sku.spec_list[0].item_list[0].point_deduct_max_amount||0}}</text>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="pinjia bg-white" v-if="list.length">
			<view class="title flex-cb">
				<text class="text">图文评价（{{list.length}}）</text>
				<navigator :url="'./more?id='+food.id">
					<view class="more flex-cb">
						<text>查看更多</text>
						<text class="cuIcon-right"></text>
					</view>
				</navigator>
			</view>
			<scroll-view class="pinjia_list" scroll-y="true">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="solid"></view>
					<view class="user_img flex-cb">
						<image :src="item.user.avatar?url+item.user.avatar:'/static/logo.png'" mode=""></image>
						<view class="user_name flex-cb">
							<view>
								<view class="name">{{item.user.nickname?item.user.nickname:'微信用户'}}</view>
								<text class="time">{{item.created_at}}</text>
							</view>
							<view>
								<text v-for="(i,t) in 5" :key="t" class="cuIcon-favorfill"
									:class="{icon:t < item.star}"></text>
							</view>
						</view>
					</view>
					<view class="pinyu">{{item.content}}</view>
					<view class="flex pinyu_img">
						<view class="" v-for="(i,j) in item.files" :key="j">
							<image :src="url+i" mode=""></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品详情 -->
		<view class="details bg-white">
			<view class="sp_details flex-c">
				<view class="solid"></view>
				<text>商品详情</text>
				<view class="solid"></view>
			</view>
			<image :src="url+ food.detail" mode="widthFix" v-if="isfile"></image>
			<video :src="url+ food.detail" v-else></video>
		</view>
		<!--  -->
		<view class="foot bg-white flex-cb">
			<view class="left flex-cb">
				<view class="icon_div" @click="golt">
					<text class="cuIcon-service"></text>
					<view class="">联系客服</view>
				</view>
				<view class="icon_div " @click="navigate(1)">
					<text class="cuIcon-shop"></text>
					<view class="">店铺</view>
				</view>
			</view>
			<view class="right flex-cb">
				<view class="button" @click="addcart">加入购物车</view>
				<view class="button button2" @click="isdisplay = 1,ispay=1">立即购买</view>
			</view>
		</view>

		<!-- 商品选择 -->
		<view class="modal_view" @click="isdisplay = 0,ispay = 0" v-if="isdisplay">
			<view class="cart" @click.stop="">
				<view class="img_title flex">
					<image :src="url+food.main_images[0]" mode=""></image>
					<view>
						<view class="title">{{food.name}}</view>
						<view class="money flex-cb ">
							<text class="price">原价<text>￥{{food.sku.spec_list[0].item_list[jj].price}}</text></text>
							<!-- <br/> -->
							<!-- <view class="right flex align-center">
								<image src="/static/vip.png" class="icon_div" mode=""></image>
								<text class="jifen">会员价：</text>
								<text class="icon">￥</text>
								<text class="num" style="margin-right: 25rpx;">{{food.sku.spec_list[0].item_list[0].vip_price}}</text>
							</view> -->
							<text class="vipPrice">会员价￥{{food.sku.spec_list[0].item_list[jj].vip_price}}</text>
						</view>
						<text class="Selected">已选：“
							<text v-for="(a,q) in arr" :key="q">
								{{a.name+','}}
							</text>
							”</text>
					</view>
				</view>
				<view class="solid"></view>
				<view class="type " v-for="(i,j) in food.sku.spec_list" :key="j">
					<text>{{i.spec_name||''}}</text>
					<view class="flex">
						<view v-for="(item,index) in i.item_list" :key="index" class="item " :class="{item1:index==jj}"
							@click.stop="jj = index">{{item.item_name}}</view>
					</view>
				</view>
				<view class="type " v-for="(i,j) in food.sku.attribute_list" :key="j">
					<text>{{i.attribute_name}}</text>
					<view class="flex">
						<view v-for="(t,p) in i.name" :key="p" class="item " :class="{item1: arr[j].name == i.name[p]}"
							@click.stop="handleArr(t,j)">{{t}}</view>
					</view>
				</view>
				<!-- arr[j].attribute_name == i.attribute_name && -->
				<view class="solid"></view>
				<view class="num flex-cb">
					<text>购买数量</text>
					<view class="num_div flex-cb">
						<view @click.stop="__num">-</view>
						<view class="addnum">{{num}}</view>
						<view @click.stop="addNum">+</view>
					</view>
				</view>
				<view class="flex-c button" v-if="ispay==0" @click="handlecart">加入购物车</view>
				<view class="flex-c button" v-else @click="got()">立即购买</view>
			</view>
		</view>
		<!-- 购物车按钮 -->
		<view class="image_div" @click="openCart">
			<image src="/static/icon_gwc.png" mode=""></image>
			<view class="icon flex-c">{{cartNum}}</view>
		</view>
		<uni-popup ref="popup" @change="change" type="bottom">
			<view class="cart-main">
				<view class="cart-title">
					<view>
						<checkbox-group @change="allChange">
							<label>
								<checkbox style="transform:scale(0.7)" value="selectAll" :checked="isAllSel" />全选
							</label>
						</checkbox-group>
					</view>
					<view @click="deteles">
						清空
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 30vh;">
					<checkbox-group @change="checkboxChange">
						<view class="cart-item" v-for="(item,index) in cartlist" :key="item.id">
							<view class="item-describe">
								<view style="margin: auto 0;">
									<checkbox style="transform:scale(0.7)" :value="item.id" :checked="item.checked" />
								</view>
								<view class="item-img">
									<image :src="url + item.goods_image" mode=""></image>
								</view>
								<view class="item-detail">
									<view>{{item.goods_title + item.goods_spec_item_name}}</view>
									<view>{{item.goods_attribute}}</view>
								</view>
							</view>
							<view class="item-specs">
								<view style="text-align: right;">￥{{item.goods_price}}</view>
								<view class="item-config">
									<view @click="handle(item,index)">-</view>
									<view>{{item.number}}</view>
									<view @click="handleAdd(item,index)">+</view>
								</view>
							</view>
						</view>
						<view class="cart-count">
							<view class="money flex align-center">
								<image src="/static/gwc(2).png" mode="" @click="iscart = 1"></image>
								<text>￥{{money}}</text>
								<view class="position flex-c">{{cartNum}}</view>
							</view>
							<view class="button flex-c" @click.stop="navigateToPay">去结算</view>
						</view>
					</checkbox-group>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				isAllSel: false,
				// 购物车数量
				cartNum: 0,
				isSelectAll: false,
				money: 0.00,
				iscart: 0,
				isall: 0,
				jj: 0,
				arr: [],
				url: '',
				isdisplay: 0,
				ispay: 0,
				isshow: 0,
				isshow1: 0,
				mch_id: '',
				main_id: '',
				isindex: 0,
				num: 1,
				food: '',
				isfile: 1,
				shop: {},
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				im_id: '',
				cartlist: []
			};
		},
		onLoad(e) {
			if (uni.getStorageSync('access_token') == '') {
				this.$utils.isgologin()
				return
			}
			// if (uni.getStorageSync('access_token') == '') {
			// 	this.$utils.isgologin()
			// }
			this.url = this.$base
			this.mch_id = e.mch_id
			this.main_id = e.main_id
			this.isindex = e.index
			this.$api.goods_list_details({}, e.id, 0).then(res => {
				console.log(res, '1111');
				this.im_id = res.data.uid
				this.food = res.data
				this.getMerchants(this.food.mch_id)
				this.getlist(this.food.id)
				this.arr = JSON.parse(JSON.stringify(this.food.sku.attribute_list));
				for (let i = 0; i < this.arr.length; i++) {
					this.arr[i].name.splice(1, 3)
				}
				console.log(this.arr);
				let t = null
				t = res.data.detail.split('.')[1]
				if (this.isAssetTypeAnImage(t)) {
					this.isfile = 1
				} else {
					this.isfile = 0
				}
			})
		},
		onShow() {},
		methods: {
			navigateToPay() {
				let t = []
				for (let i = 0; i < this.cartlist.length; i++) {
					t[i] = this.cartlist[i]
				}
				if (t.length == 0) {
					uni.showToast({
						title: '请选择商品后结算',
						icon: "none"
					})
					return
				}
				console.log(t, '购物车商品信息');
				uni.navigateTo({
					url: './Submit_order?data=' + JSON.stringify(t) + '&shop=' + JSON.stringify(this.shop)
				})
			},
			// 清空购物车
			deteles() {
				this.$api.cartsClear({
					type: 1
				}, this.shop.id, 1).then(res => {
					console.log(res);
					if (res.code == 200001) {
						// this.money = 0.00
						this.getcart(this.shop.id)
						// this.isall = 0
					}
				})
			},
			addcart() {
				this.isdisplay = 1
			},
			// 获取购物车列表和上述两
			getcart(id) {
				this.$api.cart_list({
					type: 1
				}, id, 1).then(res => { //购物车列表
					this.cartlist = res.data
					this.cartNum = 0
					this.cartlist.forEach(e => {
						this.cartNum += e.number
					})
					console.log(this.cartNum, '购物车数量');
				})
			},
			checkboxChange(e) {
				let checkNum = 0
				var items = this.cartlist,
					values = Number(e.detail.value);
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					let curMoney = item.goods_price * item.number
					if (values == item.id) {
						this.$set(item, 'checked', true)
						checkNum += 1
						this.money += curMoney
					} else {
						this.$set(item, 'checked', false)
						this.money -= curMoney
						checkNum -= 1
					}
				}
				if (checkNum == this.cartlist.length) {
					this.isAllSel = true
				} else {
					this.isAllSel = false
				}

			},
			allChange(e) {
				this.isSelectAll = !this.isSelectAll
				this.cartlist.forEach(item => {
					let curMoney = item.goods_price * item.number
					this.$set(item, 'checked', this.isSelectAll)
					if (this.isSelectAll) {
						this.money += curMoney
					} else {
						this.money -= curMoney
					}
				})
				console.log(this.cartlist, '全选的购物车');
			},
			// 打开购物车
			openCart() {
				this.$refs.popup.open('bottom')
				// this.getcart(this.shop.id)
			},
			// 购物车弹窗状态变化
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			all() {
				let istrue = 0
				let t = 0
				for (let i = 0; i < this.cartlist.length; i++) {

					t += parseFloat(this.cartlist[i].goods_price) * parseFloat(this.cartlist[i].number)
				}
				this.money = this.$utils.changeTwoDecimal_f(t)
			},
			// 购物车数量加
			handleAdd(item, index) {
				let arr = {
					spec_name: item.goods_spec_name,
					spec_item_name: item.goods_spec_item_name,
					attribute_name: item.goods_attribute,
					number: 1,
					type: 2
				}
				this.$api.ADD_cart(arr, item.goods_id, 1).then(res => {
					this.getcart(this.shop.id)
				})
			},
			// 购物车数量减
			handle(item, index) {
				this.$api.cart_delete({}, item.id, 1).then(res => {
					if (res.code == 200001) {
						this.money = 0.00
						this.getcart(this.shop.id)
					}
				})
			},
			golt() {
				console.log('id', this.im_id);
				uni.navigateTo({
					url: `../pages/TUI-Chat/chat?conversationID=C2C${this.im_id}`
				});
			},
			handlecart(id) {
				if (uni.getStorageSync('access_token') == '') {
					this.$utils.isgologin()
					return
				}
				let newarr = []
				for (let i = 0; i < this.arr.length; i++) {
					newarr[i] = this.arr[i].name
				}
				if (newarr.length !== 0) {
					this.$api.ADD_cart({
						spec_name: this.food.sku.spec_list[0].spec_name,
						spec_item_name: this.food.sku.spec_list[0].item_list[this.jj].item_name,
						attribute_name: newarr,
						number: this.num,
						type: 1,
					}, this.food.id, 1).then(res => {
						console.log(res);
						this.isdisplay = 0
						this.getcart(this.shop.id)
					})
				}
			},
			handleArr(t, j) { //选择属性
				this.arr[j].name = t
			},
			//判断是否是图片
			isAssetTypeAnImage(t) {
				return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(t.toLowerCase()) !== -1;
			},
			getlist(id) {
				this.$api.comments_list({
					page: this.page,
					limit: this.limit
				}, id, 1).then(res => {
					this.last_page = res.last_page
					console.log(res);
					this.list = [...this.list, ...res.list]
				})
			},
			navigate(id) {
				// id 聊天id
				uni.navigateTo({
					url: './shop?e=' + JSON.stringify(this.shop)
				})
			},
			got() {
				if (uni.getStorageSync('access_token') == '') {
					this.$utils.isgologin()
					return
				}
				let newarr = {
					sx: [],
					spec: '',
					price: '',
					id: '',
					vip_price: '',
					point: '',
					point_100: '',
					number: 1,
				}
				console.log(this.arr,'this.arrthis.arrthis.arr');
				for (let i = 0; i < this.arr.length; i++) { //商品属性
					newarr.sx.push(this.arr[i].name[0])
				}
				newarr.id = this.food.id
				newarr.main_images = this.url + this.food.main_images[0]
				newarr.name = this.food.name
				newarr.spec = this.food.sku.spec_list[0].item_list[this.jj].item_name //规格项
				newarr.specname = this.food.sku.spec_list[0].spec_name //规格名称
				newarr.price = this.food.sku.spec_list[0].item_list[this.jj].price //价格
				newarr.vip_price = this.food.sku.spec_list[0].item_list[this.jj].vip_price //会员价
				newarr.point_price = this.food.sku.spec_list[0].item_list[this.jj]
					.point_deduct_max_amount //积分价
				newarr.point_100 = this.food.sku.spec_list[0].item_list[this.jj][
					'100_point_deduct_amount'
				] //100积分抵扣
				newarr.number = this.num //数量
				newarr.coupon_gift_number = this.food.coupon_gift_number
				newarr.point = this.food.sku.spec_list[0].item_list[this.jj]['point'] //赠送积分

				uni.navigateTo({
					url: './Submit_order?data=' + JSON.stringify(newarr) + '&shop=' + JSON.stringify(
						this.shop)
				})
				this.isdisplay = 0
			},
			getMerchants(id) {
				this.$api.get_merchants({}, id, 1).then(res => {
					this.shop = res.data
					console.log(this.shop, '商家信息=================');
					this.getcart(this.shop.id)
					// this.getlist1(this.shop.id)
				})
			},
			__num() {
				if (this.num !== 1) {
					this.num--
				} else {
					uni.showToast({
						icon: "none",
						title: '不能再少了~'
					})
				}
			},
			addNum() {
				if (this.num !== 1000) {
					this.num++
				} else {
					uni.showToast({
						icon: "none",
						title: '不能贪心哦~'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.cart-count {
		display: flex;
		width: 750rpx;
		height: 147rpx;
		background: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		padding: 25rpx 20rpx;

		.money,
		.button {
			height: 100rpx;

			image {
				width: 50rpx;
				height: 56rpx;
			}

			text {
				font-size: 30rpx;
				margin-left: 31rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.money {
			width: 572rpx;
			border-radius: 50rpx 0 0 50rpx;
			background: #000;
			padding: 0 22rpx;
			padding-left: 44rpx;
			position: relative;

			.position {
				position: absolute;
				left: 75rpx;
				top: 22rpx;
				border-radius: 50%;
				font-size: 22rpx;
				color: #fff;
				background: #FF6F10;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.button {
			width: 168rpx;
			background: #1CD699;
			border-radius: 0px 50rpx 50rpx 0px;
			color: #fff;
		}
	}

	.cart-main {
		height: 50vh;
		border-radius: 25rpx;
		background-color: #fff;

		.cart-title {
			padding: 20rpx;
			background-color: #F8F8F8;
			display: flex;
			justify-content: space-between;
		}

		.cart-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			.item-describe {
				display: flex;

				.item-img {
					width: 120rpx;
					height: 120rpx;
					// border-radius: 15rpx;
					margin: 10rpx;

					>image {
						border-radius: 15rpx;
						height: 100%;
						width: 100%;
					}
				}

				.item-detail {
					padding: 10rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}

			.item-specs {
				margin: auto 0;

				.item-config {
					margin-top: 25rpx;
					display: flex;
					border: 1rpx solid #C3C3C3;
					width: 200rpx;
					border-radius: 10rpx;
					// padding: 8rpx;
					text-align: center;
					line-height: 46rpx;
					justify-content: space-around;

					>view:nth-child(1) {
						border-right: 1rpx solid #C3C3C3;
						flex: 1;
					}

					>view:nth-child(2) {
						flex: 2;
					}

					>view:nth-child(3) {
						border-left: 1rpx solid #C3C3C3;
						flex: 1;
					}
				}
			}

		}
	}

	.image_div {
		position: fixed;
		right: 39rpx;
		bottom: 100rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
			background: #FF6F10;
			border-radius: 50%;
			color: #fff;
			font-size: 22rpx;
			position: absolute;
			right: -10rpx;
			bottom: 50rpx;
		}
	}

	.head {
		width: 100%;
		height: 228rpx;
		padding: 20rpx 29rpx;

		.title {
			width: 680rpx;
			height: 75rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 60rpx;
		}

		.money {
			margin-bottom: 8rpx;

			.icon {
				font-size: 22rpx;
				color: #333;
			}

			.num {
				font-size: 42rpx;
				color: #333;
				// height: 59rpx;
			}

			.left {
				text {
					font-size: 28rpx;
					color: #1CD699;
				}

				.icon {
					color: #FF2E2E;
				}

				.num {
					color: #FF2E2E;
				}

			}

			.right {
				min-width: 280rpx;

				.icon,
				.num {
					color: #FF2E2E;
				}

				.jifen {
					white-space: nowrap;
					font-size: 24rpx;
				}

				.icon_div {
					margin-right: 12rpx;
					width: 34rpx;
					height: 40rpx;
				}
			}
		}

		.money2 {
			.right {

				.icon,
				.num {
					color: #FF6F10;
				}
			}
		}
	}

	.pinjia {
		height: 810rpx;
		margin: 10rpx auto;
		overflow: hidden;

		.title {
			padding: 28rpx 29rpx;

			.text {
				font-weight: bold;
				font-size: 30rpx;
				color: #666666;
			}

			.more {
				font-size: 28rpx;
				color: #1CD699;
			}
		}

		.solid {
			width: 720rpx;
			position: relative;
			left: -30rpx;
			top: -25rpx;
		}

		.pinjia_list {
			overflow: hidden;

			.item {
				padding: 27rpx 18rpx 28rpx 45rpx;

				.user_img {
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					.user_name {
						padding-left: 19rpx;
						flex: 1;

						.name {
							font-size: 28rpx;
							color: #333;
						}

						.time {
							font-size: 20rpx;
							color: #999999;
						}

						.cuIcon-favorfill {
							color: #EBEBEB;
						}

						.icon {
							color: #FF6F10;
						}
					}
				}

				.pinyu {
					margin-top: 13rpx;
					margin-bottom: 25rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.pinyu_img {
					image {
						width: 160rpx;
						height: 160rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}

	.details {
		width: 100%;
		height: auto;
		min-height: 750rpx;
		padding-bottom: 120rpx;

		.sp_details {
			height: 88rpx;

			text {
				font-size: 32rpx;
				color: #333333;
				margin: 0 26rpx;
			}

			.solid {
				width: 86rpx;
			}
		}

		image,
		video {
			width: 100%;
		}
	}

	.foot {
		width: 100%;
		height: 120rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-left: 42rpx;
		padding-right: 26rpx;

		.left {
			font-size: 24rpx;

			.icon_div {
				width: 96rpx;
				text-align: center;
				margin-right: 28rpx;
			}

			.cuIcon-service,
			.cuIcon-shop {
				font-size: 50rpx;
			}
		}

		.right {
			.button {
				width: 216rpx;
				height: 81rpx;
				background: #FF2E2E;
				text-align: center;
				color: #fff;
				line-height: 81rpx;
				border-radius: 41rpx 0px 0px 41rpx;
			}

			.button2 {
				background: #1CD699;
				border-radius: 0 41rpx 41rpx 0;
			}
		}
	}

	.cart {
		width: 750rpx;
		min-height: 970rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
		position: fixed;
		bottom: 0;
		padding-bottom: 24rpx;

		.img_title {
			margin: 15rpx 0 0 30rpx;

			image {
				width: 240rpx;
				height: 240rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.title {
				width: 408rpx;
				max-height: 108rpx;
				font-size: 34rpx;
				display: inline-block;
				font-weight: 400;
				color: #000000;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.money {
				height: 70rpx;
				margin-top: 8rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 40rpx;

				.price {
					color: #1CD699;

					text {
						color: #FF2E2E;
					}
				}

				.right {
					min-width: 280rpx;

					.icon,
					.num {
						color: #FF2E2E;
					}

					.jifen {
						white-space: nowrap;
						font-size: 24rpx;
					}

					.icon_div {
						margin-right: 12rpx;
						width: 34rpx;
						height: 40rpx;
					}
				}

				.vipPrice {
					// width: 100%;
					font-size: 30rpx;
					color: #FF2E2E;
					// color: #999;
				}
			}

			.Selected {
				margin-top: 10rpx;
				padding-top: 10rpx;
				font-size: 28rpx;
				color: #272626;
			}
		}

		.solid {
			width: 720rpx;
			margin: auto;
			margin-top: 32rpx;
		}

		.type {
			padding: 23rpx 0 7rpx 28rpx;
			margin-bottom: 56rpx;

			text {
				font-size: 32rpx;
				color: #333;
			}

			.flex {
				margin-top: 22rpx;
				font-size: 28rpx;

				.item {
					text-align: center;
					line-height: 60rpx;
					width: 120rpx;
					height: 60rpx;
					background: #F2F2F2;
					margin-right: 20rpx;
					border-radius: 10rpx;
					color: #999999;
				}

				.item1 {
					background: #1CD699;
					color: #fff;
				}
			}
		}

		.num {
			padding: 31rpx 30rpx 0 28rpx;

			text {
				font-size: 32rpx;
				color: #333;
			}

			.num_div {
				view {
					width: 60rpx;
					height: 60rpx;
					background: #F2F2F2;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
				}

				.addnum {
					width: 100rpx;
					margin: 0 20rpx;
				}
			}
		}

		.button {
			width: 690rpx;
			height: 74rpx;
			background: #1CD699;
			border-radius: 37rpx;
			color: #fff;
			margin: auto;
			margin-top: 70rpx;
		}
	}
</style>